<template>
  <div class="home">
     <div class="category_container">
    <div class="left_container">
      <div>
         <CategoryItem v-for="(item,index) in categoryItems"
        :key="index"
        :item="item"
        :selectIndex="selectIndex"
        :index="index"
        @changeSelectIndex="changeSelectIndex"/>
      </div>
    </div>
    <div class="right_container"
    ref="rightContainer"
    @touchstart="onTouchStart">
      <div v-for="(item,index) in categoryItems"
      :key="index"
      class="right_wrapper"
      ref="rightContent">
        <div class="header_title">
          {{item.cname}}
        </div>
        <div v-for="(subItem,subIndex) in item.subcategories"
        :key="subIndex"
        class="right_item_container">
            <div>
              <img :src="subItem.scpic"/>
            </div>
            <div>{{subItem.subcname}}</div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
// @ is an alias to /src
import CategoryItem from "../components/CategoryItem";
import axios from "axios";

export default {
  name: 'Home',
  components: {
    CategoryItem
  },
  data(){
    return{
      categoryItems:[],
      selectIndex:0
    }
  },
  methods:{
    changeSelectIndex(index){
      this.selectIndex = index;
      //点击触发 移除滚动事件监听
      this.$refs.rightContainer.removeEventListener("scroll",this.scrollHandle)
      //获取点击后 一级分类对应二级分类的块
      // console.log(this.$refs.rightContent);
      var contentViews = this.$refs.rightContent;
      var targetView =  contentViews[this.selectIndex];
      targetView.scrollIntoView({behavior: "smooth"});
    },
    scrollHandle(){
      var target =  event.target;
      //获取右侧的滚动距离
      var scrollOffset = target.scrollTop;
      // console.log(scrollOffset);
      //当滚动距离等于 元素距离文档顶部的距离时，元素已经到达了屏幕的顶部
      //获取右侧所有块
       var contentViews = this.$refs.rightContent;
       for(let index=0;index<contentViews.length;index++){
         //判断滚动距离是否大于等于对的某一块元素距离文档顶部的距离
         //小于下一块距离文档顶部的距离
         //offsetTop:获取元素距离文档顶部的距离
         if(scrollOffset>=contentViews[index].offsetTop&&scrollOffset<contentViews[index+1].offsetTop){
           this.selectIndex = index
         }
       }
    },
    onTouchStart(){
      console.log("111111111111");
      this.$refs.rightContainer.addEventListener("scroll",this.scrollHandle)
    }
  },
  mounted(){
    axios.get("http://api.kudesoft.cn/tdk/category").then((res)=>{
      console.log(res);
      this.categoryItems = res.data.data.data
    }).catch((err)=>{
      console.log(err);
    })

    this.$refs.rightContainer.addEventListener("scroll",this.scrollHandle)
  }
}
</script>

<style scoped>
.category_container
{
  width: 100%;
  height: 90vh;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.left_container
{
  width: 25%;
  height: 100%;
  border: 1px solid red;
  overflow: scroll;
}

.right_container
{
  width: 75%;
  height: 100%;
  border: 1px solid red;
  overflow: scroll;
}

.right_wrapper
{
  width: 100%;
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid red;
}

.right_item_container
{
  width: 100px;
}

.right_item_container img
{
  width: 100px;
}

.header_title
{
  width: 100%;
  height: 40px;
  background-color: red;
}
</style>
